import { Form } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import { groupBy } from 'lodash';

import styles from './style.less';
import TagSelect from '@/components/TagSelect';
import type { FieldType } from './type';

const FormItem = Form.Item;

type Props = {
  fieldsConfig: FieldType[];
};

const Fields: React.FC<Props> = ({ fieldsConfig }) => {
  const fieldGroups = groupBy(fieldsConfig, (item) => item.group);

  return (
    <div className={styles.fields}>
      {Object.keys(fieldGroups).map((key: string) => (
        <StandardFormRow key={key} title={key} block style={{ marginBottom: 2, paddingBottom: 2 }}>
          <div className={styles.formRow}>
            <FormItem style={{ marginBottom: 0 }} colon={false} name={key}>
              <TagSelect>
                {fieldGroups[key]
                  .filter((item) => !item.noSelect)
                  .map((option: any) => (
                    <TagSelect.Option key={option.field} value={option.field}>
                      <span className={option.className}>{option.label}</span>
                    </TagSelect.Option>
                  ))}
              </TagSelect>
            </FormItem>
          </div>
        </StandardFormRow>
      ))}
    </div>
  );
};

export default Fields;
